<template>
	<div class="user-info">
		<el-form :model="queryParams" ref="queryForm" :inline="true">
		  <el-form-item label="用户名" prop="userName">
		    <el-input
		      v-model="queryParams.userName"
		      placeholder="请输入用户名"
		      clearable
		      size="small"
		      style="width: 150px"
		      @keyup.enter.native="handleQuery"
		    />
		  </el-form-item>
		  <el-form-item label="姓名" prop="realName">
		    <el-input
		      v-model="queryParams.realName"
		      placeholder="请输入姓名"
		      clearable
		      size="small"
		      style="width: 150px"
		      @keyup.enter.native="handleQuery"
		    />
		  </el-form-item>
		  <el-form-item label="年龄" prop="age">
		    <el-input
		      v-model="queryParams.age"
		      placeholder="请输入年龄"
		      clearable
		      size="small"
		      style="width: 100px"
		      @keyup.enter.native="handleQuery"
		    />
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
		    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
		  </el-form-item>
		</el-form>
		
		<el-row :gutter="10">
		  <el-col :span="1.5">
		    <el-button
		      type="primary"
		      icon="el-icon-plus"
		      size="mini"
		      @click="handleAdd">新增</el-button>
		  </el-col>
		  <el-col :span="1.5">
		    <el-button
		      type="success"
		      icon="el-icon-edit"
		      size="mini"
		      @click="handleUpdate">修改</el-button>
		  </el-col>
		  <el-col :span="1.5">
		    <el-button
		      type="danger"
		      icon="el-icon-delete"
		      size="mini"
		      @click="handleDelete">删除</el-button>
		  </el-col>
		</el-row>
		<el-table
		    :data="userList"
		    style="width: 100%"
			:border="true"
			height="350"
			ref = "multipleTable"
		    :row-class-name="tableRowClassName">
			<el-table-column
			      type="selection"
			      width="55"
				  >
			</el-table-column>
			<el-table-column
				label="序号"
			  type="index"
			  width="50">
			</el-table-column>
			<el-table-column
				style="display: none;"
				label="编号"
				prop="id"
				width="80"
				>
			</el-table-column>
			<el-table-column
			  prop="userName"
			  label="用户名"
			  width="180">
			</el-table-column>
			<el-table-column
			  prop="realName"
			  label="姓名"
			  width="180">
			</el-table-column>
		    <el-table-column prop="birthDay"  label="生日"  width="180">
			  <template slot-scope="scope">{{scope.row.birthDay| datetimeFormat('YYYY-MM-DD')}}</template>
		    </el-table-column>
		    <el-table-column
		      prop="age"
		      label="年龄">
		    </el-table-column>
			<el-table-column label="操作">
			  <template slot-scope="scope">
				<el-button
				  size="mini"
				  @click="handleEdit(scope.row)">编辑</el-button>
				<el-button
				  size="mini"
				  type="danger"
				  @click="handleDel(scope.row)">删除</el-button>
			  </template>
			</el-table-column>
		</el-table>
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  background
		  :current-page="queryParams.pageNum"
		  :page-sizes="[10, 20, 50, 100]"
		  :page-size="queryParams.pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
		
		
		<!-- 添加或修改角色配置对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px">
		  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
		    <el-form-item label="用户名" prop="userName">
		      <el-input v-model="form.userName" placeholder="请输入用户名" />
		    </el-form-item>
		    <el-form-item label="姓名" prop="realName">
		      <el-input v-model="form.realName" placeholder="请输入姓名" />
		    </el-form-item>
		    <el-form-item label="生日" prop="birthDay">
				<el-date-picker
				      v-model="form.birthDay"
				      type="date"
					  value-format="yyyy-MM-dd"
				      placeholder="选择日期">
				    </el-date-picker>
		    </el-form-item>
		    <el-form-item label="年龄" prop="age">
				<el-input-number v-model="form.age" controls-position="right" :min="1" :max="199"></el-input-number>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="submitForm">确 定</el-button>
		    <el-button @click="cancel">取 消</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
import { list,add,update,del} from '@/api/user.js'
import { Notification, MessageBox, Message } from 'element-ui'
export default{
	data(){
		return {
			userList: [],
			isShow: false,
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 总条数
			total: 0,
			// 查询参数
			queryParams: {
			  pageNum: 1,
			  pageSize: 10,
			  userName: null,
			  realName: null,
			  age:null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
			  userName: [
			    { required: true, message: "用户名不能为空", trigger: "blur" }
			  ],
			  realName: [
			    { required: true, message: "姓名不能为空", trigger: "blur" }
			  ],
			  birthDay: [
			    { required: true, message: "生日不能为空", trigger: "blur" }
			  ],
			  age: [
			    { required: true, message: "年龄不能为空", trigger: "blur" }
			  ]
			}
		}
	},
	created() {
		this.queryUser();
	},
	methods: {
	  queryUser(){
		  list(this.queryParams).then((res)=>{
			  this.userList = res.data.rows;
			  this.total = res.data.total;
		  });
	  },
	  resetQuery(){
		  this.queryParams.userName = null;
		  this.queryParams.realName = null;
		  this.queryParams.age = null;
	  },
	  handleQuery(){
		  list(this.queryParams).then((res)=>{
			  this.userList = res.data.rows;
			  this.total = res.data.total;
		  });
	  },
	  handleAdd(){
		 this.reset();
		 this.title = "新增"
		 this.open = true
	  },
	  handleUpdate(){
		  var selData = this.$refs.multipleTable.selection;
		  if(selData.length>1){
			  this.$message({
			    message: '只能选择一条记录',
			    type: 'success'
			  });
			  return;
		  }
		  if(selData.length == 0 || selData==null){
			  this.$message({
				message: '未选择记录',
				type: 'success'
			  });
			  return;
		  }
		this.reset();
	  	this.title = "修改"
	  	this.open = true
		this.form = selData[0];
	  },
	  handleEdit(row){
		  this.reset();
		  this.title = "修改"
		  this.open = true
		  this.form = row;
	  },
	  handleDel(row){
		  var ids = [];
		  ids.push(row.id);
		  MessageBox.confirm(
		    '确认删除吗？',
		    '系统提示',
		    {
		      confirmButtonText: '确认',
		      cancelButtonText: '取消',
		      type: 'warning'
		    }
		  ).then(res=>{
		  	let idsStr = ids.join(',')
		  	let idJson = {'ids':idsStr}
		  	del(idJson).then(ress=>{
		  		if(ress.data.code === 0){
		  			this.$message({
		  				message: '删除成功',
		  				type: 'success'
		  			});
		  			this.queryUser()
		  		}
		  	})
		  })
	  },
	  handleDelete(){
		var selData = this.$refs.multipleTable.selection;
		if(selData.length == 0 || selData==null){
		  this.$message({
			message: '未选择记录',
			type: 'success'
		  });
		  return;
		}
		var ids = [];
		for(var i=0;i<selData.length;i++){
			ids.push(selData[i].id);
		}
	  	MessageBox.confirm(
	  	  '确认删除吗？',
	  	  '系统提示',
	  	  {
	  	    confirmButtonText: '确认',
	  	    cancelButtonText: '取消',
	  	    type: 'warning'
	  	  }
	  	).then(res=>{
			let idsStr = ids.join(',')
			let idJson = {'ids':idsStr}
			del(idJson).then(ress=>{
				if(ress.data.code === 0){
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.queryUser()
				}
			})
		})
		
	  },
	  tableRowClassName({row, rowIndex}) {
		if (rowIndex === 1) {
		  return 'warning-row';
		} else if (rowIndex === 3) {
		  return 'success-row';
		}
		return '';
	  },
	  handleSizeChange(val) {
		console.log(`每页 ${val} 条`);
		this.queryParams.pageSize = val;
		this.queryUser()
	  },
	  handleCurrentChange(val) {
		console.log(`当前页: ${val}`);
		this.queryParams.pageNum = val;
		this.queryUser()
	  },
	  resetForm(formName){
		if(this.$refs[formName]){
			this.$refs[formName].resetFields();
		}
	  },
	  // 取消按钮
	  cancel() {
	    this.open = false;
	    this.reset();
	  },
	  // 表单重置
	  reset() {
	    this.form = {
	      id: null,
	      userName: undefined,
	      realName: undefined,
	      birthDay: undefined,
	      age: 0
	    };
		this.resetForm("form");
	  },
	  /** 提交按钮 */
	  submitForm: function() {
	    this.$refs["form"].validate(valid => {
	      if(valid){
			if(this.form.id==null){
				//添加
				add(this.form).then(res=>{
					if(res.data.code === 0){//登录成功
						this.$message({
						  message: '新增成功',
						  type: 'success'
						});
						this.open = false;
						this.queryUser();
					}
				});
			}else{
				//修改
				update(this.form).then(res=>{
					if(res.data.code === 0){
						this.$message({
						  message: '修改成功',
						  type: 'success'
						});
						this.open = false;
						this.queryUser();
					}
				})
			}
	      }else{
			  
		  }
	    })
	  }
	}
}
</script>

<style lang="scss">
.el-table .warning-row {
	background: oldlace;
}

.el-table .success-row {
	background: #f0f9eb;
}
</style>
